/* eslint-disable react/jsx-key */
// /wbn-api/complaint
import React, { useState, useRef } from 'react';
import ReactDOM from 'react-dom';
import { Image, Switch, Button, Modal, message, Popconfirm } from 'antd';
import AutoTable from '@/components/AutoTable';
import InitForm from '@/components/InitForm';
import { area, user, classify } from '@/services/basic';
import { connect } from 'umi';
import { PlusOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import { doFetch, getFetch } from '@/utils/doFetch';
import CompanyName from '@/components/CompanyName';
import moment from 'moment';

// type 类型有 table treeselect upload inputnumber datepicker daterange radio select textarea autoinput editor password input

let defaultFields = {
  user_remark: {
    value: null,
    type: 'textarea',
    title: '备注',
    name: ['user_remark'],
    required: false,
    col: {
      span: 24,
    },
  },
};

function Payment(props) {
  const [vs, cvs] = useState(false), //表单显/隐
    [fields, cf] = useState(defaultFields),
    [iftype, ciftype] = useState({});

  let actionRef = useRef(),
    ChildRef = null;
  function reload() {
    actionRef?.current?.reload();
    ChildRef?.onRefresh();
  }

  const columns = [
    {
      title: '客户',
      dataIndex: 'customer_name',
      key: 'customer_name',
    },
    {
      title: '客户的公司',
      dataIndex: 'company_name',
      render: (_, row) => (
        <CompanyName
          row={{ ...row, name: row?.company_name ?? row?.name, id: row?.company_id ?? row?.id }}
          reload={reload}
        />
      ),
    },
    {
      title: '区域',
      dataIndex: 'area_name',
      key: 'area_id',
      valueType: 'select',
      options: {
        database: area,
        params: {
          is_all: 1,
        },
      },
    },
    {
      title: '投诉类型',
      dataIndex: 'complaint_setting_name',
      key: 'complaint_setting_id',
      valueType: 'select',
      options: {
        database: (params) => getFetch({ url: '/wbn-api/complaint_setting', params }),
        params: {
          is_all: 1,
        },
      },
    },
    {
      title: '客户投诉的备注',
      dataIndex: 'customer_remark',
      search: false,
    },
    {
      title: '处理的员工',
      dataIndex: 'user_name',
      key: 'user_id',
      valueType: 'select',
      options: {
        database: user,
        params: {
          is_all: 1,
        },
      },
    },
    {
      title: '投诉时间',
      dataIndex: 'complaint_time',
      key: 'complaint_time',
      valueType: 'date',
      render: (_text, row) => {
        const text = row.complaint_time;
        return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '-';
      },
    },
    {
      title: '处理时间',
      dataIndex: 'handle_time',
      key: 'handle_time',
      search: false,
      render: (_text, row) => {
        const text = row.handle_time;
        return text ? moment(text).format('YYYY-MM-DD HH:mm:ss') : '-';
      },
    },
    {
      title: '处理备注',
      dataIndex: 'user_remark',
      search: false,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      valueType: 'select',
      options: [
        {
          value: 'stalled',
          label: '待处理',
        },
        {
          value: 'completed',
          label: '已处理',
        },
      ],
    },
    {
      title: '操作',
      valueType: 'option',
      width: 100,
      render: (text, record, _, action) => [
        <a
          style={{ color: record.status === 'completed' ? '#999999' : '#1890ff' }}
          onClick={() => {
            if (record.status === 'completed') {
              return;
            }
            cvs(true);
            cf((fields) => {
              for (let i in fields) {
                fields[i].value = null;
              }
              return { ...fields };
            });
            ciftype({
              val: 'dule',
              title: '处理投诉',
              id: record.id,
            });
          }}
        >
          处理
        </a>,
      ],
    },
  ];

  const { run, loading } = useRequest(doFetch, {
    onSuccess: (res) => {
      if (res.code == 0) {
        message.success('操作成功');
        reload();
        cvs(false);
      }
    },
  });

  let saveData = (values) => {
    if (iftype.val == 'dule') {
      run({
        url: '/wbn-api/complaint/handle_complete',
        params: { ...values, id: iftype.id },
        method: 'PUT',
      });
    }
  };

  return (
    <div className="pgcontainer">
      <AutoTable
        pagetitle={props.route.name} //页面标题
        columns={columns}
        actionRef={actionRef}
        onRef={(node) => (ChildRef = node)}
        path="/wbn-api/complaint"
      />
      <Modal
        maskClosable={false}
        title={iftype.title}
        open={vs}
        onCancel={() => cvs(false)}
        footer={false}
        destroyOnClose={true}
      >
        <InitForm
          fields={fields}
          submitData={(values) => {
            saveData(values);
          }}
          onChange={(changedValues, allValues) => {
            //联动操作
          }}
          submitting={loading}
        />
      </Modal>
    </div>
  );
}

export default connect(({ basic, loading }) => ({
  basic,
  loading,
}))(Payment);
